<template>
  <div class="registration-top">
    <h5 v-if="!store.user"></h5>
    <h5 v-if="!!store.user">{{ store.user.username }}</h5><span><el-icon>
        <Bell />
      </el-icon></span>
    <p class="pp">升级会员享受更多权益&gt;</p>
  </div>
  <div class="registration-main">
    <h3>会员权益重磅升级</h3><span class="span">升级会员</span>
    <div class="custom">
      <div class="custom-yuan">

      </div>
      <div class="custom-yuan">

      </div>
      <div class="custom-yuan">

      </div>
      <div class="custom-yuan">

      </div>
      <div class="custom-yuan">

      </div>
    </div>
    <div class="user">
      <p>普通用户</p>
    </div>
    <div class="user">
      <p>个人版</p>
    </div>
    <div class="user">
      <p>专业版</p>
    </div>
    <div class="user">
      <p>旗舰版</p>
    </div>
    <div class="consult" @mouseover="consult()" @mouseleave="consultchu()">
      咨询
    </div>

    <div class="template-main">
      <div class="template">
        <img src="./img/NG@8[_9(XCF{G])KUV6IO2U.png" alt="" class="img-image">
        <p>模板免费用</p>
      </div>
      <div class="template">
        <img src="./img/NG@8[_9(XCF{G])KUV6IO2U.png" alt="" class="img-image">
        <p>版权商用</p>
      </div>
      <div class="template">
        <img src="./img/NG@8[_9(XCF{G])KUV6IO2U.png" alt="" class="img-image">
        <p>无水印下载</p>
      </div>
      <div class="template">
        <img src="./img/NG@8[_9(XCF{G])KUV6IO2U.png" alt="" class="img-image">
        <p>无广告</p>
      </div>
    </div>
    <div class="equity">
      <p>查看更多权益</p>
    </div>

    <div class="counselor" ref="counselor">
      <div class="counselor-main">
        <img src="../../components/Footer/img/v.jpg" alt="" class="images">
        <h4>Hi，我是您的专属项目顾问</h4>
        <h4>请定制您的产品</h4>
        <img src="../../components/Footer/img/3.png" alt="" class="image">
      </div>
      <p class="qq">立即扫码，真人咨询</p>
    </div>

    <div class="beginner">
      <h5>完成新手任务赢奖励<span class="spa">查看任务</span></h5>
    </div>
    <div class="myworks">
      <el-button>我的作品</el-button>
      <el-button>账号管理</el-button>

    </div>
    <div class="user-main">
      <img src="../../components/Footer/img/Screenshot_20230105_234056.jpg" alt="">
      <span v-if="!store.user"></span> <span v-if="!!store.user">{{ store.user.username }}</span>
      <el-button @click="gologin()">退出登录</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useInfo } from '@/stores/counter';
const store: any = useInfo();

const router = useRouter();

const counselor = ref();
const consult = () => {
  counselor.value.style = `display:block;`;
};
const consultchu = () => {
  counselor.value.style = `display:none;`;
};
const gologin = () => {
  localStorage.removeItem('token');
  localStorage.removeItem('userinfo');
  localStorage.removeItem('users');
  if (localStorage.getItem('token') === null) {
    ElMessage.success('退出成功');
    router.go(0);
  }
};
</script>

<style scoped>
h4 {
  width: 100%;
  float: left;
  font-size: 13px;
  text-align: center;
  color: #fff;
  margin-top: 3px;
}

.image {
  width: 70px;
  height: 70px;
  float: left;
  margin-left: 33%;
  margin-top: -10px;
}

.qq {
  float: left;
  margin-top: 90px;
  margin-left: 50px;
  font-size: 13px;
  color: #ccc;
}

.registration-top {
  width: 100%;
  height: 70px;
}

.registration-top p {
  width: 200px;
  float: left;
  margin-top: 15px;
  color: #ccc;
  font-size: 14px;
}

.registration-top p:hover {
  color: #1261ff;
  cursor: pointer;
}

.registration-top h5 {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.registration-top span {
  float: right;
  margin-right: 20px;
  margin-top: 10px;
}

.registration-main {
  width: 100%;
  height: 300px;
  background-color: #DBE9F9;
  border-radius: 0 0 55px 55px;
}

.registration-main h3 {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.span {
  width: 80px;
  height: 30px;
  background-color: #F6CB93;
  float: right;
  text-align: center;
  line-height: 30px;
  margin-top: 10px;
  border-radius: 10px;
  margin-right: 10px;
}

.custom {
  width: 100%;
  height: 3px;
  background-color: #fff;
  float: left;
  margin-top: 20px;
}

.custom-yuan {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #C0D1E7;
  float: left;
  margin-left: 35px;
}

.custom-yuan:hover {
  background-color: #1261ff;
  cursor: pointer;
}

.consult {
  width: 60px;
  height: 30px;
  background-color: #1261ff;
  float: right;
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 13px;
  color: #fff;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

.counselor {
  width: 200px;
  height: 240px;
  background-color: #fff;
  box-shadow: 1px 1px 1px #000;
  position: absolute;
  left: -20px;
  top: 90px;
  border-radius: 20px;
  display: none;
}

.counselor-main {
  width: 100%;
  height: 120px;
  background-color: #1261ff;
  float: left;
  border-radius: 20px 20px 30px 30px;
}

.images {
  width: 30px;
  height: 30px;
  float: left;
  border-radius: 50%;
  margin-left: 37%;
  margin-top: 10px;
}

.user {
  width: 65px;
  height: 20px;
  transform: skewY(-25deg);
  float: left;
}

.template-main {
  width: 100%;
  height: 80px;
  float: left;
  margin-top: 10px;
}

.template {
  width: 55px;
  height: 70px;
  float: left;
  margin-left: 10px;
}

.template p {
  font-size: 10px;
  color: #000;
  float: left;
  margin-left: 5px;
}

.template p:hover {
  color: #1261ff;
}

.img-image {
  width: 30px;
  height: 30px;
  float: left;
  border-radius: 40%;
  margin-left: 10px;
}

.equity {
  width: 80px;
  height: 30px;
  background-color: #F5FAFF;
  float: left;
  margin-left: 100px;
  line-height: 8px;
  text-align: center;
  border-radius: 20px;
  margin-top: 10px;

}

.equity p {
  font-size: 12px;
}

.beginner {
  width: 90%;
  height: 40px;
  background-color: #fff;
  float: left;
  margin-left: 15px;
  margin-top: 20px;
  box-shadow: 2px 2px 2px #000;
  border-radius: 30px;
  line-height: 7px;
}

.beginner h5 {
  font-size: 12px;
  float: left;
  margin-left: 30px;
}

.spa {
  width: 60px;
  height: 25px;
  background-color: rgb(255, 117, 108);
  float: right;
 display: flex;
 align-items: center;
 justify-content: center;
  margin-top: -10px;
  margin-left: 30px;
  border-radius: 30px;
  color: #fff;
  font-size: 12px;
}

.myworks {
  width: 100%;
  height: 50px;
  float: left;
  margin-top: 20px;
}

.myworks button {
  float: left;
  margin-left: 33px;
}

.myworks p:hover {
  color: #1261ff;
  cursor: pointer;
}

.user-main {
  width: 90%;
  height: 60px;
  background-color: #F5F7FB;
  float: left;
  margin-top: 35px;
  margin-left: 15px;
  display: flex;
}

.user-main button {
  float: right;
  margin-top: 10px;
}

.user-main img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  float: left;
  margin-top: 5px;
  margin-left: 20px;
}

.user-main span {
  display: inline-block;
  margin-left: 10px;
  line-height: 60px;
}</style>